<template>
	<view class="container">
		<view style="width: 100%; text-align: center;height: 90upx;	position: fixed;z-index: 99; ">
			<scroll-view id="nav-bar" class="nav-bar" scroll-x>
				<view class="nav-item" :class="{'current': 0 === tabCurrentIndex}" @click="changeTab(0)">
					申报列表
				</view>
				<view class="nav-item" :class="{'current': 1 === tabCurrentIndex}" @click="changeTab(1)">
					申报历史
				</view>
			</scroll-view>
		</view>
		<scroll-view class="panel-scroll-box" scroll-y>
			<swiper id="swiper" class="swiper-box" :duration="300" :current="tabCurrentIndex" @change="changeTabSwiper">
				<swiper-item>
					<scroll-view scroll-y style="height: 100%;">
						<view class="bottom_box">
							<!-- 输入框 开始 -->
					<!-- 		<view class="inp">
								<uni-icons type="search" color="#3E9CF9"></uni-icons>
								<input type="text" v-model="kw" placeholder="请输入搜索内容" @input='search'/>
							</view> -->
							<!-- 输入框 结束 -->
							<view v-for="item in partyList" @click="navTo(item.url)">
								<view class="list_box" v-if="item.show">
									<view>
										<image src="@/static/image/shenqing.png" style="width:40upx;height: 40upx;"></image>
									</view>
									<view class="list_title" style="margin-left: 16upx;">{{item.title}}</view>
									<view class="more_box">
										<text class="yticon icon-you"></text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y style="height: 100%;">
						<view class="bottom_box1">
							<!-- 输入框 开始 -->
							<view class="inp">
								<uni-icons type="search" color="#3E9CF9"></uni-icons>
								<input type="text" v-model="kw" placeholder="请输入搜索内容" @input='search'/>
							</view>
							<!-- 输入框 结束 -->
							<!-- 人脸识别 开始 -->
							<view class="box" @click="discern">
								<view>
									<image src="@/static/image/icon.png" mode="widthFix"></image>
								</view>
								<view class="text-box">
									<view>人脸识别</view>
									<view>身份证信息核对认证</view>
								</view>
								<uni-icons type="forward" color="#fff"></uni-icons>
							</view>
							<!-- 人脸识别 结束 -->
							<empty v-if="examineList.length == 0"></empty>
							<view style="width:100%;height:100%; margin-top: 20rpx;" v-else>
								<view>
									<view style="width:100%;overflow: hidden;" v-for="(item,index) in examineList"
									 :key="index">
										<view class="list-cell">
											<view class="list-title">
												<view style="display: flex;flex-direction: row;">
													<image src="@/static/image/shenqing.png" style="width:50upx;height: 50upx;margin-top: 15upx;"></image>
													<view style="margin-left: 20upx;">
														{{item.businessDesc}}
													</view>
												</view>
												<view style="font-weight: normal;">
													<view v-if="item.processState == 0" style="color: #3E9CF9;">审核中</view>
													<view v-else-if="item.processState == 1" style="color: #56ED92;">完成</view>
													<view v-else-if="item.processState == 2" style="color: #3E9CF9;">等待人脸核验</view>
													<view v-else-if="item.processState == 4" style="color: #F93E3E;">已取消</view>
												</view>
											</view>
											<view class="list-cell-item">
												<view class="item-title">{{item.realName}}</view>
												<view class="item-info">{{item.idCard}}</view>
											</view>
											<view class="list-cell-item" v-if="item.processState == 1">
												<view class="item-title">审核结果</view>
												<view v-if="item.passState == 0" class="item-info">不通过</view>
												<view v-else-if="item.passState == 1" class="item-info">已通过</view>
											</view>
											<view class="list-cell-item" v-if="item.processState == 0 && (item.passState == 0 || item.passState == 3)">
												<view class="item-title">审核结果</view>
												<view v-if="item.passState == 0" class="item-info">已移交</view>
												<view v-else-if="item.passState == 3" class="item-info">已驳回</view>
											</view>
											<view class="list-bottom">
												<button type="default" class="pay-btn" size="mini" @click="navToDetails(item)">查看</button>
												<button v-if="item.processState == 2 || (item.processState == 0 && item.passState == 3)" type="default"
												 class="pay-btn" size="mini" @click="update(item)">编辑</button>
												<button v-if="(item.processState == 0 && item.passState != 3) || item.processState == 2" type="default"
												 class="pay-btn" size="mini" @click="cancel(item)">取消</button>
											</view>
										</view>
									</view>
									<uni-load-more :status="loadMoreType"></uni-load-more>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</scroll-view>
	</view>
</template>

<script>
	import empty from "@/components/empty";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	export default {
		name: "declareIndex",
		data() {
			return {
				partyList: [{
					title: '80岁以上高龄补贴申请',
					url: '/pages/declare/oldman/declareAddOldMan',
					show: true
				}, {
					title: '最低生活保障金申请',
					url: '/pages/declare/declareLife/declareAddLife',
					show: true
				}, {
					title: '困难临时救助金申请',
					url: '/pages/declare/declarepoorpeople/declareAddPoorPeople',
					show: true
				}, {
					title: '困难残疾人生活补贴申请',
					url: '/pages/declare/employment/declareAddEmployment',
					show: true
				}, {
					title: '医保代交',
					url: '/pages/declare/medical/declareAddMedical',
					show: true
				}, {
					title: '农保申请',
					url: '/pages/declare/agricultural/declareAddAgricultural',
					show: true
				}, {
					title: '生育服务登记',
					url: '/pages/declare/birth/declareAddBirth',
					show: true
				}, {
					title: '养老保险领取申请',
					url: '/pages/declare/registration/declareAddRegistration',
					show: true
				}, {
					title: '居民上户',
					url: '/pages/declare/household/declareAddHousehold',
					show: true
				}, {
					title: '养老保险注销',
					url: '/pages/declare/cancel/declareAddCancel',
					show: true
				}],
				log: "",
				tabCurrentIndex: 0,
				triggered: false,
				scrollLeft: 0, //顶部选项卡左滑距离
				tabBars: [{
					index: 0,
					name: "申报列表"
				}, {
					index: 1,
					name: "申报历史"
				}],
				examineList: [],
				url: "",
				//搜索框值
				kw:'',
			}
		},
		components: {
			empty
		},
		onLoad(options) {
			let params = this.getUrlCode()
			console.log(params)
			let navCode = params.navCode
			let userUuid = params.navId
			if (userUuid) {
				this.$api.request.userInfoAndAreaInfo({
					userUuid: userUuid,
					areaCode: this.$api.request.communityCode
				}, res => {
					if (res.body.status.statusCode === '0') {
						this.login(res.body.data);
						console.log("查询登录信息回调")
						this.toPage(navCode)
					}
				});
			}
		},
		onShow() {
			this.examineList = []
			this.initData()
		},
		methods: {
			...mapMutations(['login']),
			toPage(navCode) {
				if (navCode) {
					let pageUrl = "";
					switch (navCode) {
						case "disabled-flow":
							pageUrl = "/pages/declare/employment/declareAddEmployment";
							break;
						case "poorpeople-flow":
							pageUrl = "/pages/declare/declarepoorpeople/declareAddPoorPeople";
							break;
						case "oldman-flow":
							pageUrl = "/pages/declare/oldman/declareAddOldMan";
							break;
						case "life-flow":
							pageUrl = "/pages/declare/declareLife/declareAddLife";
							break;
						case "medical-flow":
							pageUrl = "/pages/declare/medical/declareAddMedical";
							break;
						case "agricultural-flow":
							pageUrl = "/pages/declare/agricultural/declareAddAgricultural";
							break;
						case "birth-flow":
							pageUrl = "/pages/declare/birth/declareAddBirth";
							break;
						case "registration-flow":
							pageUrl = "/pages/declare/registration/declareAddRegistration";
							break;
						case "household-flow":
							pageUrl = "/pages/declare/household/declareAddHousehold";
							break;
						case "pension-cancel-flow":
							pageUrl = "/pages/declare/cancel/declareAddCancel";
							break;
						default:
							pageUrl = "";
							break;
					}
					if (pageUrl) {
						this.checkInfoIsExpire(navCode)
					}
				}
			},
			// 检验该推送消息是否过期
			checkInfoIsExpire(navCode) {
				let params = {
					typeCode: navCode
				}
				this.$api.request.checkPushInfoIsExpire(params, (res) => {
					if (res.body.status.statusCode === '0') {
						if (res.body.data) {
							this.navTo(pageUrl);
						} else {
							uni.showModal({
								title: "提示",
								content: "该条通知消息还未开始或已过期，请等待通知！",
								success: function(res) {
									window.history.back();
								}
							})
						}
					}
				})
			},
			getUrlCode() { // 截取url中的code方法
				let url = window.location.href
				let theRequest = new Object()
				if (url.indexOf("?") != -1) {
					let paramUrl = url.split("?")[1];
					let strs = paramUrl.split("&")
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
					}
				}
				return theRequest
			},
			navTo(url) {
				console.log('url:',url);
				if (url) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.$api.msg("相关登记业务暂未开放")
				}
			},
			//tab切换
			changeTab(index) {
				this.tabCurrentIndex = index;
				this.kw=''
			},
			changeTabSwiper(e){
				this.tabCurrentIndex = e.detail.current;
			},
			//取消申请
			cancel(item) {
				let params = {
					businessCategory: item.businessCategory,
					businessKey: item.businessKey,
					taskComment: '取消申请',
					assigneeId: item.startAssigneeId,
					assigneeName: item.startAssigneeName
				}
				this.$api.request.cancelProcess(params, (res) => {
					if (res.code == 200) {
						this.$api.msg(res.msg)
						this.examineList = []
						this.initData();
					} else {
						this.$api.msg(res.msg)
					}
				})
			},
			//查看详情
			navToDetails(item) {
				switch (item.processDefinitionKey) {
					case "disabled-flow":
						this.url = '/pages/declare/employment/declareEmploymentDetails?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "oldman-flow":
						this.url = '/pages/declare/oldman/declareDetailsOldMan?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "life-flow":
						this.url = '/pages/declare/declareLife/declareDetailsLife?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "poorpeople-flow":
						this.url = '/pages/declare/declarepoorpeople/declareDetailsPoorPeople?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "agricultural-flow":
						this.url = '/pages/declare/agricultural/declareDetailsAgricultural?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "birth-flow":
						this.url = '/pages/declare/bitrth/declareDetailsBitrth?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "household-flow":
						this.url = '/pages/declare/household/declareDetailsHousehold?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "pension-cancel-flow":
						this.url = '/pages/declare/cancel/declareDetailsCancel?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "medical-flow":
						this.url = '/pages/declare/medical/declareDetailsMedical?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "registration-flow":
						this.url = '/pages/declare/registration/declareDetailsRegistration?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					default:
						break
				}
				uni.navigateTo({
					url: this.url
				})
			},
			//修改业务
			update(item) {
				switch (item.processDefinitionKey) {
					case "disabled-flow":
						this.url = '/pages/declare/employment/declareUpdateEmployment?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory
						break
					case "oldman-flow":
						this.url = '/pages/declare/oldman/declareUpdateOldMan?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory
						break
					case "life-flow":
						this.url = '/pages/declare/declareLife/declareUpdateLife?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory
						break
					case "poorpeople-flow":
						this.url = '/pages/declare/declarepoorpeople/declareUpdatePoorPeople?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory
						break
					case "agricultural-flow":
						this.url = '/pages/declare/agricultural/declareUpdateAgricultural?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory
						break
					case "birth-flow":
						this.url = '/pages/declare/birth/declareUpdateBirth?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory
						break
					case "household-flow":
						this.url = '/pages/declare/household/declareUpdateHousehold?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory
						break
					case "pension-cancel-flow":
						this.url = '/pages/declare/cancel/declareUpdateCancel?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory
						break
					case "medical-flow":
						this.url = '/pages/declare/medical/declareUpdateMedical?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory
						break
					case "registration-flow":
						this.url = '/pages/declare/registration/declareUpdateRegistration?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory
						break
					default:
						break
				}
				uni.navigateTo({
					url: this.url
				})
			},
			//查询我的申请列表
			initData() {
				this.loadMoreType = "loading"
				let params = {
					current: 1,
					size: 5,
					startAssigneeId: uni.getStorageSync("userInfo").userUuid,
				}
				this.$api.request.myProcessOwnerInfo(params, (res) => {
					if (res.code == 200) {
						if (res.data != null) {
							this.examineList = this.examineList.concat(res.data.records)
							this.total = res.data.total
						}
						if (this.examineList >= this.total) {
							this.loadMoreType = "noMore"
						} else {
							this.loadMoreType = "loading"
						}
					} else {
						this.$api.msg(res.msg)
					}
				})
			},
			//人脸识别
			discern(){
				console.log('点击了人脸识别');
			},
			//输入框
			search(){
				console.log('搜索的是：',this.kw);
			}
		}
	}
</script>

<style scoped lang='scss'>
	.box{
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx;
		border-radius: 16rpx;
		background-image: url(@/static/image/bacc.png);
		background-size: 100%;
		background-repeat: no-repeat;
		image{
			width: 72rpx;
			height: 96rpx;
		}
		.text-box{
			height: 100rpx;
			flex: 0.7;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: #fff;
			view:nth-child(2){
				color: #A7CFF6;
			}
		}
	}
	.inp{
		display: flex;
		align-items: center;
		border: 1px solid black;
		border-radius: 80rpx;
		padding: 5rpx 5rpx 5rpx 20rpx;
		margin: 20rpx 0;
		input{
			margin-left: 10rpx;
		}
	}
	.more_box {
		width: 40upx;
		height: 40upx;
		border-radius: 20upx;
		/* background: #E65540; */
	}

	.list_title {
		width: 568upx;
		/* border-radius: 50upx; */
		/* line-height: 80upx; */
		font-size: 30upx;
		font-weight: bold;
		transition: all .5s;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.list_box {
		background: #FFFFFF;
		box-shadow: 2upx 2upx 22upx -2upx rgba(0, 0, 0, 0.1);
		height: 100upx;
		padding: 30upx 30upx 30upx 40upx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 32upx;
		border-radius: 10upx;
	}

	.bottom_box {
		margin: 32upx;
		width: 685upx;
	}

	.bottom_box1 {
		margin: 20upx;
	}

	.announce {
		display: flex;
		height: 80upx;
		width: calc(50% - 60upx);
		margin-right: 20upx;
		margin-left: auto;
	}

	.announce_text {
		font-size: 22upx;
		color: #999999
	}

	.announce_title {
		font-size: 30upx;
		font-weight: bold;
	}

	.announce_all {
		display: flex;
		flex-direction: column;
		margin-left: 16upx;
		justify-content: space-between;
	}

	.apply {
		margin-left: 40upx;
		height: 120upx;
		padding: 20upx 0;
		display: flex;
		width: calc(50% - 40upx);
		position: relative;
		border-right: 2upx solid #D8D8D8;
	}

	.top_box {
		height: 546upx;
		padding: 342upx 32upx 0;
		position: relative;
	}

	.bg {
		filter: drop-shadow(0px 4upx 22upx rgba(0, 0, 0, 0.2));
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 418upx;
	}

	.apply_box {
		position: relative;
		background: white;
		box-shadow: 2upx 2upx 20upx rgba(0, 0, 0, 0.1);
		border-radius: 30upx;
		height: 200upx;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.container {
		width: 100%;
		/* background-color: #FBFBFB; */
		overflow: hidden;
		/* padding: 32upx 20upx 32upx 20upx; */
	}

	page {
		background-color: #FBFBFB;
	}

	/* 顶部tabbar */
	.nav-bar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 90upx;
		white-space: nowrap;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
		background-color: #fff;

		.nav-item {
			display: inline-block;
			width: 250upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			font-size: 30upx;
			color: #303133;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid #3E9CF9;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}

		.current {
			color: #3E9CF9;

			&:after {
				width: 50%;
			}
		}
	}

	.pay-btn {
		height: 50upx;
		line-height: 50upx !important;
		margin-top: 20upx;
		margin-left: 10upx;
		float: right;
		font-size: 24upx !important;
		background-color: #3E9CF9 !important;
		color: white !important;
	}

	.list-cell {
		padding: 30upx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		.list-title {
			height: 80upx;
			line-height: 80upx;
			font-size: 30upx;
			font-weight: bolder;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.list-bottom {
			height: 90upx;
			line-height: 90upx;
		}

		.list-cell-item {
			height: 80upx;
			line-height: 70upx;
			display: flex;
			flex-direction: row;

			.item-title {
				font-size: 28upx;
				font-weight: border;
				text-align: left;
				margin-left: 70upx;
			}

			.item-info {
				font-size: 24upx;
				text-align: right;
				margin-left: 20upx;
			}
		}

		.list-cell-last {
			height: 90upx;
			line-height: 90upx;
			display: flex;
			flex-direction: row;
			font-size: 30upx;
			justify-content: space-between;

			.item-title {
				font-size: 28upx;
				font-weight: border;
				text-align: left;
				margin-left: 20upx;
			}

			.item-info {
				font-size: 24upx;
				text-align: right;
				margin-right: 20upx;
			}
		}
	}

	.panel-scroll-box {
		height: calc(100% - 10upx);
		position: absolute;
		top: 100upx;
		z-index: 10;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}

	.swiper-box {
		height: 100%;
	}

	.item-status {
		font-weight: normal;
	}
</style>
